position:
top
bottom
left
right
top
bottom
left
right
Позиционирование элементов
Иногда приходится сталкиваться с дизайном, в котором элементы расположены нестандартно: например, фиксируются относительно страницы или располагаются один поверх другого.
position: static;
Понятие потока (flow) и статическое позиционирование static
Если мы добавляем одному из них отступ, то сдвигаются следующие за ним. Таким образом, элементы находятся в связке.
position: relative;
Относительное позиционирование relative
Когда элемент остаётся в потоке, но смещается относительно самого себя, это называют относительное позиционирование.
position: fixed;
Фиксированное позиционирование fixed
В корне отличается от изученных ранее тем, что фиксированное позиционирование вырывает элемент из потока.
position: absolute;
Абсолютное позиционирование absolute
Абсолютное. Это один из самых распространённых типов позиционирования.
position: sticky;
Липкий блок absolute
Элемент с position: sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.
z-index: 1;
Наложение элементов друг на друга
Когда при позиционировании мы вырываем элементы из потока, они могут перекрывать друг друга. Нужно определить правило, кто из них должен оказаться на поверхности, ближе к пользователю.